<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <!-- <title>原生打印功能实现（iframe）</title> -->
    <title>&nbsp;</title>  <!-- 设置 title 为 non-breaking space -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #333;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        @page{
            size: auto;
            margin:0 ;

        }
    </style>
</head>

<body>
    <h1>原生打印功能实现</h1>
    <button id="printButton">点击打印</button>

    <script>
        document.write("<div>111</div>")
        function printContent() {
            // 打印内容
            var printHTML = `
        <h2>打印标题</h2>
        <p>这是通过原生 JavaScript 动态生成的打印内容。</p>
        <ul>
          <li>打印项 1</li>
          <li>打印项 2</li>
          <li>打印项 3</li>
        </ul>
      `;

            // 创建隐藏的 iframe 元素
            var iframe = document.createElement('iframe');
            iframe.style.position = 'absolute';
            iframe.style.width = '0px';
            iframe.style.height = '0px';
            iframe.style.border = 'none';
            // iframe.title = '66666'; // 设置为空字符串以避免继承


            // 将 iframe 添加到文档中
            document.body.appendChild(iframe);

            // // 使用 window.open 创建新的页面
            // var iframe = window.open('width=800,height=600');

            // // 获取新窗口的 document 对象
            // var iframeDocument = iframe.document;



            // iframe.onload = function() {
            //     var doc = iframe.contentDocument || iframe.contentWindow.document;
            //     doc.title = ''; // 设置iframe的标题为空
            // };



            // 获取 iframe 的文档对象
            var iframeDocument = iframe.contentWindow.document;

            // 写入打印内容和样式
            iframeDocument.open();
            //         <title></title>
            // <meta name="robots" content="noindex, nofollow">
            iframeDocument.write(`
        <!DOCTYPE html>
        <html>
       <title>&nbsp</title>
        <style>
            // 不显示页眉页脚的样式
            @page{
            size: auto;
            margin:0 ;

        }
          </style>
        <div>12222222222222222222222222</div>
        </html>
      `);
            // iframe.srcdoc=`        
            // <!DOCTYPE html>
            //     <html>

            //     <style>

            //       </style>
            //     <div>12222222222222222222222222</div>
            //     </html>`;
            iframeDocument.close();

            // 等待内容加载完毕后触发打印
            iframe.contentWindow.onload = function () {
                iframe.contentWindow.print(); // 调用 iframe 中的打印功能
                document.body.removeChild(iframe); // 打印完毕后移除 iframe
            };


        }

        // 绑定打印按钮的点击事件
        document.getElementById('printButton').addEventListener('click', printContent);
    </script>
</body>

</html>
<!-- 创建隐藏的 iframe 元素：

我们使用 document.createElement('iframe') 创建了一个 iframe 元素，并通过设置 style 属性将其隐藏（宽度和高度设置为 0，边框也去除）。
然后将这个 iframe 添加到页面中，但由于它是隐藏的，因此不会影响页面显示。
写入打印内容和样式：

将需要打印的 HTML 内容动态写入 iframe 的文档中（通过 iframe.contentWindow.document.write）。
你可以在 iframe 内部自定义样式，确保打印效果符合预期。
触发打印：

当 iframe 中的内容加载完成后，调用 iframe.contentWindow.print() 来触发打印功能。
打印完毕后，移除 iframe 元素。
iframe 的好处：

通过 iframe 实现打印，可以避免新开一个窗口或标签页，这样更加优雅并且避免了弹窗拦截的问题。 -->


<!-- vue-nb-print 的实现原理：
通常像 vue-nb-print 这种库，会封装一些底层的原生浏览器打印功能，避免开发者手动编写复杂的 JavaScript 代码。它大多是通过以下几种方式来实现打印：

创建一个隐藏的 iframe 或新窗口：

通过创建一个新的 iframe 或一个弹出的打印窗口来加载要打印的内容。这样可以确保打印内容与当前页面隔离。
动态写入内容：

动态地将要打印的 HTML 内容写入到这个 iframe 或打印窗口中，这样可以确保打印内容不会影响父页面的展示。
调用打印功能：

在内容加载完成之后，调用 window.print() 来触发打印操作。
样式隔离：

一般会在打印内容中使用 @media print 来定义打印专用的样式，确保打印效果符合预期。
vue-nb-print 的简单实现步骤： -->


<!-- 如果你的目标是 避免继承父页面的标题，而是希望在 iframe 中设置一个空白的标题，可以通过将 <title> 标签设置为 &nbsp; 来实现。

为什么使用 &nbsp;：
&nbsp; 是 HTML 中的 不间断空格，它将作为 title 标签的内容，确保 标题为空，而不是继承父页面的标题。 -->